<template>
   
    <template v-for="menu in dbMenu">
        <template v-if="menu.children && menu.children.length>0">
            <el-sub-menu :index="menu.name"  :key="menu.id">
                <template #title>
                <el-icon><location /></el-icon>
                <span>{{ menu.meta.title }}</span>
                </template>
                <el-menu-item-group v-for="item in menu.children" :key="item.id">
                <RouterLink :to="item.path">
                    <el-menu-item :index="item.name"><el-icon><location /></el-icon>{{ item.meta.title }}</el-menu-item>
                </RouterLink>
                </el-menu-item-group>
            </el-sub-menu>
        </template>
        <template v-else>
            <RouterLink :to="menu.path">
                <el-menu-item :index="menu.name"><el-icon><HomeFilled /></el-icon><span>{{menu.meta.title}}</span> </el-menu-item>
            </RouterLink>
        </template>
    </template>

</template>

<script setup>
import {defineProps } from 'vue'
let dbMenuProp = defineProps({
    menu : {
        type : Array,
        default : () => []
    }
})
let dbMenu = dbMenuProp.menu;
</script>

<style scoped>

</style>
